<template>
	<div>
		<div class="no-print" style="height: 42px;"></div>
		<div style="width: 100%;display: flex;">
			<div class="no-print" style="width: 30%;">.</div>
			<div class="width-100-percent">
				<table class="table" style="width: 100%;" borderColor="#c5c8ce" cellPadding="0" cellSpacing="0" border="1">
					<tr>
						<td colspan="4" class="text-center">
							<span class="form-title">细纱工艺单</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">订单来源</td>
						<td>{{ ruleForm.customerName }}</td>
						<td class="label-name">链轮</td>
						<td>
							<span>{{ ruleForm.specialProcessesList ? ruleForm.specialProcessesList.find(x => x.name === '链轮').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">下达时间</td>
						<td>{{ ruleForm.orderDate }}</td>
						<td class="label-name">氨纶倍数</td>
						<td>
							<span>{{ ruleForm.specialProcessesList ? ruleForm.specialProcessesList.find(x => x.name === '氨纶倍数').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">交货时间</td>
						<td>{{ ruleForm.deliveryDateFrom }} ~ {{ ruleForm.deliveryDateTo }}</td>
						<td class="label-name">细纱捻度</td>
						<td>
							<span>{{ ruleForm.specialProcessesList ? ruleForm.specialProcessesList.find(x => x.name === '细纱捻度').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">色号</td>
						<td>{{ ruleForm.colorName }}</td>
						<td class="label-name">实纺支数</td>
						<td>
							<span>{{ ruleForm.specialProcessesList ? ruleForm.specialProcessesList.find(x => x.name === '实纺支数').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">品种</td>
						<td>{{ ruleForm.productName }}</td>
						<td class="label-name">并线捻度</td>
						<td>
							<span>{{ ruleForm.specialProcessesList ? ruleForm.specialProcessesList.find(x => x.name === '并线捻度').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">批号</td>
						<td>
							{{ ruleForm.productOrderBatchList.length ? ruleForm.productOrderBatchList[0].batchCode : '' }}
						</td>
						<td colspan="2" class="label-name">竹节纱工艺</td>
					</tr>

					<tr>
						<td class="label-name">粗纱</td>
						<td>
							<el-input v-if="isEdit" v-model="csStr"></el-input>
							<span v-else>{{ csStr || ' ' }}</span>
						</td>
						<td class="label-name">竹长</td>
						<td>
							<span>{{ ruleForm.varietyYarnSpecItemList && ruleForm.varietyYarnSpecItemList.length ? ruleForm.varietyYarnSpecItemList.find(x => x.name === '竹长').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">氨纶</td>
						<td>
							<el-input v-if="isEdit" v-model="alStr"></el-input>
							<span v-else>{{ alStr || ' ' }}</span>
						</td>
						<td class="label-name">竹距</td>
						<td>
							<span>{{ ruleForm.varietyYarnSpecItemList && ruleForm.varietyYarnSpecItemList.length ? ruleForm.varietyYarnSpecItemList.find(x => x.name === '竹距').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">纺纱方式</td>
						<td>
							<el-input v-if="isEdit" v-model="text2"></el-input>
							<span v-else>{{ text2 || ' ' }}</span>
						</td>
						<td class="label-name">倍率</td>
						<td>
							<span>{{ ruleForm.varietyYarnSpecItemList && ruleForm.varietyYarnSpecItemList.length ? ruleForm.varietyYarnSpecItemList.find(x => x.name === '倍率').value : ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">订单数量</td>
						<td>{{ ruleForm.orderQty }}</td>
						<td class="label-name">备注</td>
						<td>
							<el-input v-if="isEdit" v-model="text3"></el-input>
							<span v-else>{{ text3 || ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">订单备注</td>
						<td colspan="3">
							<el-input v-if="isEdit" v-model="ruleForm.remark"></el-input>
							<span v-else>{{ ruleForm.remark || ' ' }}</span>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="text-center">
							<span class="form-title">成品要求</span>
						</td>
					</tr>
					<tr>
						<td class="label-name">色号</td>
						<td>{{ ruleForm.colorName }}</td>
						<td class="label-name">内袋颜色</td>
						<td>
							{{ ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0] ? ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0].innerBagList.map(x => x.name).join(',') : '' }}
						</td>
					</tr>
					<tr>
						<td class="label-name">品种</td>
						<td>{{ ruleForm.productName }}</td>
						<td class="label-name">外袋颜色</td>
						<td>
							{{ ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0] ? ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0].outerBagList.map(x => x.name).join(',') : '' }}
						</td>
					</tr>
					<tr>
						<td class="label-name">批号</td>
						<td>
							{{ ruleForm.productOrderBatchList.length ? ruleForm.productOrderBatchList[0].batchCode : '' }}
						</td>
						<td class="label-name">扎线颜色</td>
						<td>
							{{ ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0] ? ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0].bundleList.map(x => x.name).join(',') : '' }}
						</td>
					</tr>
					<tr>
						<td class="label-name">纸管</td>
						<td>
							{{ ruleForm.productOrderBatchList.length && ruleForm.productOrderBatchList[0].paperTubeList ? ruleForm.productOrderBatchList[0].paperTubeList.map(x => x.name).join(',') : '' }}
						</td>
						<td class="label-name"></td>
						<td></td>
					</tr>
					<tr>
						<td class="label-name">包重</td>
						<td>
							<el-input v-if="isEdit" v-model="text4"></el-input>
							<span v-else>{{ text4 || ' ' }}</span>
						</td>
						<td class="label-name"></td>
						<td></td>
					</tr>
				</table>
			</div>
			<div class="no-print" style="width: 30%;">
				<div style="display: flex;flex-direction: column;">
					<div class="margin-bottom-10">
						<el-button class="no-print" type="default" :icon="!isEdit ? 'el-icon-edit-outline' : 'el-icon-check'" size="small" style="margin-left: 4px;" @click="onEditBtn"></el-button>
					</div>
					<div>
						<el-button :disabled="isEdit" class="no-print" type="default" icon="el-icon-printer" size="small" style="margin-left: 4px;" @click="onPrintBtn"></el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import { productionPrdOrderGet } from '../../../api/production/order';
    export default {
        data() {
            return {
                text0: '',
                text1: '',
                text2: '',
                text3: '',
                text4: '',
                isEdit: false,
                dataId: null,
                ruleForm: {},
                csStr: '', // 拼接粗纱品种
                alStr: '' // 拼接氨纶
            };
        },
        methods: {
            onEditBtn() {
                this.isEdit = !this.isEdit;
            },
            onPrintBtn() {
                window.print();
            },
            // 订单详情
            getOrderDetailRequest() {
                return productionPrdOrderGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        const resData = JSON.parse(JSON.stringify(res.data.res));
                        this.ruleForm = resData;
                        if (this.ruleForm.productOrderBatchList && this.ruleForm.productOrderBatchList.length) {
                            if (this.ruleForm.productOrderBatchList[0].coarseSandList) {
                                this.csStr = this.ruleForm.productOrderBatchList[0].coarseSandList.filter(x => x.typeName === '粗纱').map(x => x.productName).join(' ; ');
                                // 把粗纱以外的放在氨纶单元格内
                                this.alStr = this.ruleForm.productOrderBatchList[0].coarseSandList.filter(x => x.typeName !== '粗纱').map(x => `${x.batchCode ? x.batchCode : x.productName}`).join(' ; ');
                            }
                        }
                        this.text2 = resData.yarnType;
                    }
                });
            },
            async getDependentData() {
                this.dataId = this.$route.query.id;
                if (this.dataId) await this.getOrderDetailRequest();
            }
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
  .table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    td {
      min-width: 100px;
      height: 48px;
      padding: 10px;
      text-align: center;
    }
    .form-title {
      font-weight: 500;
      font-size: 24px;
    }
    .label-name {
      font-weight: 500;
    }
  }
  @media print {
    .no-print{
      display: none;
    }
  }
</style>
